<template>
	<view>
		
		<fui-nav-bar isOccupy isFixed background="#0052D9" title="入库详情" color="#fff" @leftClick="leftClick">
		  <fui-icon color="#fff" name="arrowleft"></fui-icon>
			<template v-if="current==0" v-slot:right>
				<u-icon name="trash-fill" color="#fff" size="45rpx"></u-icon>
			</template>
		</fui-nav-bar>
		
		<view class="" style="background-color: #fff;padding: 20rpx 0;">
			<u-subsection :list="list" :current="current" activeColor="#0052d9" inactiveColor="#0052d9" mode="subsection" bgColor="#0052d9"  @change="sectionChange"></u-subsection>
		</view>
			
		<scroll-view scroll-y="true" :style="{height: '100vh',paddingBottom: `${current==0?'320rpx':'0'}`}">
			<view v-if="current==0" class="warp">
			  <view class="nav">
			    <view class="port">
			      <view class="li">
			        <view class="left">入库类型</view>
			        <view class="right">采购入库</view>
			      </view>
			      <view class="li">
			        <view class="left">入库单号</view>
			        <view class="right">RK2022546</view>
			      </view>
			      <view class="li">
			        <view class="left">入库主题</view>
			        <view class="right">采购备件入库2324214</view>
			      </view>
			      <view class="li">
			        <view class="left">入库日期</view>
			        <view class="right">2021-01-20</view>
			      </view>
			      <view class="li">
			        <view class="left">采购单号</view>
			        <view class="right">CG2022245102</view>
			      </view>
						<view class="li">
						  <view class="left">采购部门</view>
						  <view class="right">生产部门11</view>
						</view>
						<view class="li">
						  <view class="left">采购人员</view>
						  <view class="right">楚楚</view>
						</view>
						<view class="li">
						  <view class="left">联系方式</view>
						  <view class="right">15276896416</view>
						</view>
						<view class="li">
						  <view class="left">供应商</view>
						  <view class="right">供应商一</view>
						</view>
						<view class="li">
						  <view class="left">联系人</view>
						  <view class="right">千千</view>
						</view>
						<view class="li">
						  <view class="left">联系方式</view>
						  <view class="right">18781583527</view>
						</view>
						<view class="li">
						  <view class="left">仓库名称</view>
						  <view class="right">仓库一</view>
						</view>
						<view class="li">
						  <view class="left">备注</view>
						  <view class="right"></view>
						</view>
						<view class="li">
						  <view class="left">仓库管理员</view>
						  <view class="right">楚楚</view>
						</view>
						<view class="li">
						  <view class="left">入库人员</view>
						  <view class="right">芊芊</view>
						</view>
						<view class="li">
						  <view class="left">入库申请人</view>
						  <view class="right">admin</view>
						</view>
						<view class="li">
						  <view class="left">所在部门</view>
						  <view class="right">生产部门一</view>
						</view>
						<view class="li">
						  <view class="left">备注</view>
						  <view class="right"></view>
						</view>
			    </view>
			  </view>
			</view>
			
			<view v-if="current==1" class="">
				<view class="" style="background-color: #fff;padding: 30rpx;margin-top: 20rpx;">
					共8种备件，总数量51
				</view>
				
				<view class="task-item" v-for="(i, index) in list2" :key="index" @click="handleTodo">
				  <view class="task-icon">图片</view>
				  <view class="task-main">
				    <view class="task-content__title" style="display: flex;align-items: center;">
				      <view>
				        {{ i.name }}
				      </view>
								<fui-icon :size="30" name="arrowright" @click="clickItem" style="position: absolute;right: 10rpx;"></fui-icon>
				    </view>
				    <view class="task-content__desc">
				      <view>备件编码：{{ i.code }}</view>
				    </view>
				    <view class="task-content__desc">
				      <view>规格型号：{{ i.type }}</view>
				    </view>
				    <view class="task-content__desc">
				      <view>入库数量：{{ i.count }}</view>
				    </view>
				  </view>
				</view>
				
			</view>
			
		</scroll-view>
		
		<view v-if="current==0"  class="footer" @click="clickBtn">
		  <view class="recall">编辑</view>
		</view>
		
	</view>
</template>

<script setup>
import { ref,reactive } from 'vue';
let current = ref(0)
let list = reactive(['入库信息', '入库明细'])
let list1 = reactive([
	{ id: 1, name: '仓库一', count: 225,code:'WZ015455' },  
	{ id: 2, name: '仓库一', count: 310,code:'WZ015df55' },  
	{ id: 3, name: '仓库一五', count: 325,code:'WZ0we5455' },
	{ id: 4, name: '仓库一五', count: 135 ,code:'Wwe15455'},
	{ id: 5, name: '仓库五', count: 335 ,code:'Wse5455'}
])

const list2 = reactive([
  {
    id: 0,
    name: '备件00100',
    type: '30*30*50',
    code: 'SB5666568',
    count: 10,
    specifications: '电梯设备备件类型11',
    addCount: 0
  },
  {
    id: 1,
    name: '备件222',
    type: '30*30*50',
    code: 'SB1234268',
    count: 20,
    specifications: '电梯设备备件类型22',
    addCount: 0
  },
  {
    id: 2,
    name: '备件33333',
    type: '30*30*50',
    code: 'SB6534688',
    count: 40,
    specifications: '电梯设备备件类型33',
    addCount: 0
  },
  {
    id: 3,
    name: '备件5555',
    type: '30*30*50',
    code: 'SB6534688',
    count: 40,
    specifications: '电梯设备备件类型33',
    addCount: 0
  },
  {
    id: 4,
    name: '备件6666',
    type: '30*30*50',
    code: 'SB6534688',
    count: 40,
    specifications: '电梯设备备件类型33',
    addCount: 0
  }
]);

const leftClick = () => {
	uni.navigateBack()
}

const handleTodo = (e) => {
	uni.navigateTo({
		url:'./infoItem'
	})
}

const sectionChange = (e) => {
	current.value = e
}
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  overflow: hidden;
  background-color: #f6f6f6;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.colorGray {
  color: #cbb8b8 !important;
}
.task-item {
  width: 100%;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  color: #0052db;
  .task-icon {
    width: 30%;
    background: #0052db;
    color: #fff;
    border-radius: 6rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .task-main {
    height: 100%;
    width: 70%;
    padding-left: 20rpx;
    box-sizing: border-box;
    .task-content__title {
      width: 100%;
      height: 50%;
      font-weight: bolder;
			color: #0052db;
      font-size: 30rpx;
    }
    .task-content__desc {
      width: 100%;
      height: 50%;
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      font-size: 25rpx;
      align-items: center;
      color: #909399;
    }
    .stepper {
      display: flex;
      margin-right: 10rpx;
      align-items: center;
      .left {
        margin-right: 30rpx;
        border: 1px solid #0052db;
        border-radius: 10rpx;
        width: 40rpx;
        height: 40rpx;
        text-align: center;
      }
      .count {
        margin-right: 30rpx;
      }
      .right {
        margin-right: 10rpx;
        border: 1px solid #0052db;
        border-radius: 10rpx;
        width: 40rpx;
        height: 40rpx;
        text-align: center;
      }
    }
  }
}

.port {
	.document {
	  .debris {
	    display: flex;
	    align-items: center;
	    height: 100rpx;
	    .img {
	      width: 60rpx;
	      height: 60rpx;
	      margin: 0 30rpx;
	    }
	  }
	}
	.grid-container {
	  display: grid;
	  grid-template-columns: repeat(5, 1fr);
	  gap: 10px;
	  padding: 30rpx;
	}
	
	.grid-item {
	  // text-align: center;
	  // padding: 20px;
	  display: flex;
	  align-items: center;
	  justify-content: space-around;
	  .img {
	    width: 100%;
	    border-radius: 50%;
	    height: auto;
	    aspect-ratio: 1/1; /* 指定宽高比为 1:1 */
	  }
	}
  .title {
    border-bottom: 1px solid #ccc;
    height: 70rpx;
    display: flex;
    align-items: center;
  }
  .li {
    padding: 20rpx;
    display: flex;
    align-items: center;
    height: 100rpx;
    // padding-left: 40rpx;
    .right {
      margin-left: 30rpx;
      color: #cbb8b8;
    }
  }
  .item {
    // height: 100rpx;
    padding-left: 40rpx;
    padding-bottom: 30rpx;
    .left {
      height: 70rpx;
    }
    .described {
      padding-right: 50rpx;
    }
  }
}

.statusType{
	position: absolute;
	right: 30rpx;
	top: 60rpx;
	width: 200rpx;
	height: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	border: 1rpx solid #0052d9;
	color: #0052d9;
}
.warp {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
	margin-top: 20rpx;
  .nav {
    background-color: #fff;
		.port {
		  background-color: #fff;
		  margin-bottom: 20rpx;
		  .li {
		    display: flex;
		    align-items: center;
		    height: 100rpx;
		    padding-left: 40rpx;
		    .right {
		      margin-left: 30rpx;
		      color: #cbb8b8;
		    }
		  }
		  .item {
		    // height: 100rpx;
		    padding-left: 40rpx;
		    padding-bottom: 30rpx;
		    .left {
		      height: 70rpx;
		    }
		    .described {
		      padding-right: 50rpx;
		    }
		  }
		}
    .top {
      display: flex;

      .img {
        width: 180rpx;
        height: 190rpx;
      }
      .nav_title {
        // padding: 20rpx;
        padding-left: 20rpx;
        .h1 {
          font-size: 30rpx;
          font-weight: 600;
          line-height: 60rpx;
          height: 60rpx;
        }
        .h2 {
          line-height: 44rpx;
        }
      }
    }
    .nav_bottom {
      margin-top: 10rpx;
      .nav_warp {
        padding: 10rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
      }
    }
  }
  .scroll-view {
    flex: 1;
    // background-color: pink;
    overflow: hidden;
    padding-bottom: 170rpx;
  }
}
.footer {
  // position: fixed;
  // top: 50;
  // button: 20;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  z-index: 5;
  border-top: 1px solid #ccc;
  height: 150rpx;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .recall {
    // background-color: #0052d9;
    width: 90%;
    border: 1px solid #0052d9;
    border-radius: 5rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #0052d9;
  }
	.recall2{
		width: 40%;
		border: 1px solid #ccc;
		border-radius: 15rpx;
		padding: 20rpx;
		text-align: center;
	}
	.recall3{
		width: 40%;
		background-color: #0052d9;
		border-radius: 15rpx;
		padding: 20rpx;
		text-align: center;
		color: #ffffff;
	}
}
</style>
